<template>
  <div class="goods-edit">
    <sx-common-form-base id="f1" ref="baseForm" :data="data" :form="form">
			<template slot="cover" slot-scope="scope">
				<el-upload
					class="avatar-uploader"
					action="/dev/common/upload"
					:on-success="successFn">
					<img v-if="form[scope.data.prop]" :src="form[scope.data.prop]" class="avatar">
  				<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</template>
			<template slot="detail" slot-scope="scope">
				<div>
					<sx-common-form-richtext id="rich" v-model="form[scope.data.prop]" tinymcePath="./tinymce-5.1.1/"></sx-common-form-richtext>
				</div>
			</template>
		</sx-common-form-base>
		<div class="_flex-center" style="margin-bottom:20px">
			<el-row>
			<el-button type="danger" @click="nav('goodsList')">返回</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </el-row>
		</div>
  </div>
</template>

<script>
import SxCommonFormBase from 'sx-common-form-base'
import 'sx-common-form-base/theme-default/lib/index.css'
import SxCommonFormRichtext from 'sx-common-form-richtext'
import 'sx-common-form-richtext/theme-default/lib/index.css'
  export default {
    components: {
			SxCommonFormBase,
			SxCommonFormRichtext
    },
    data() {
      return {
        data:[
					{
            label: "商品名称：",
            prop: "goodsName",
            controlType: "input",
						rulesText: "text",
						span:24,
            isMust: true,
					},
					{
						label: "商品封面",
						prop: "cover",
						controlType: "slot",
						rulesText: "text",
						span:24,
						isMust: false
					},
					{
            label: "价格：",
            prop: "price",
            controlType: "input",
            rulesText: "float",
            isMust: true,
					},
					{
            label: "划线价：",
            prop: "linePrice",
            controlType: "input",
            rulesText: "float",
            isMust: true,
					},
					{
            label: "库存：",
            prop: "num",
            controlType: "input",
            rulesText: "text",
            isMust: true,
          },
          {
            label: "规格：",
            prop: "size",
            controlType: "input",
            rulesText: "text",
            isMust: true,
					},
					{
						label: "商品详情",
						prop: "detail",
						controlType: "slot",
						rulesText: "text",
						span:24,
						isMust: false
					}
        ],
        form:{
          goodsName:'',
          cover:"",
          price:"",
          linePrice:"",
          num:"",
					size:"",
					detail:"<p></p>",
        },
      }
    },
    created () {
      this.$route.query.id ? this.getData(this.$route.query.id) : ''
    },
		methods: {
			successFn(res,file,list) {
				console.log(res,list)
				if(res.code==0){
					this.form.cover = res.data.url
					this.$refs.baseForm.validateField('cover')
				}
      },
      getData(id) {
        this.$api.goodsInfo({
          id:id
        }).then(res=>{
          this.form = res.data
        })
      },
			save() {
        this.$api.goodsEdit(this.form).then(res=>{
          this.$com.toast("保存成功", "success")
        })
			},
			 nav(path) {
      this.$router.push({
        path: path
      });
    },
		},
  }
</script>

<style lang="scss" scoped>
.goods-edit{
  background: #fff;
  padding: 30px 0 0;
}
.avatar-uploader .el-upload {
    border: 2px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>